<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      img {
        width: 100%;
        vertical-align: middle;
      }
      .box {
        width: 500px;
        margin: 100px auto 0;
        border: 1px solid #ccc;
      }
      .tab-navs {
        display: flex;
        background-color: rgb(42, 180, 0);
      }
      .tab-nav {
        padding: 6px 12px;
        border-right: 1px solid #ccc;
        cursor: pointer;
        color: #fff;
        text-shadow: 0 0 4px #fff;
      }
      .tab-nav.active {
        border-bottom: 2px solid #fd8c0b;
        text-shadow: 0 0 4px #fd8c0b;
        color: #fd8c0b;
        background-color: #fff;
      }
      .tab-item {
        display: none;
      }
      .tab-item.current {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul class="tab-navs">
        <li class="tab-nav active">熊猫</li>
        <li class="tab-nav">哇噻</li>
        <li class="tab-nav">yeah</li>
        <li class="tab-nav">还行</li>
        <li class="tab-nav">程序媛</li>
      </ul>
      <ul class="tab-items">
        <li class="tab-item current"><img src="./images/01-01.jpg" alt="" /></li>
        <li class="tab-item"><img src="./images/01-02.jpg" alt="" /></li>
        <li class="tab-item"><img src="./images/01-03.jpg" alt="" /></li>
        <li class="tab-item"><img src="./images/01-04.jpg" alt="" /></li>
        <li class="tab-item"><img src="./images/01-05.jpg" alt="" /></li>
      </ul>
    </div>
    <script>
      var navs = document.getElementsByClassName('tab-nav')
      var items = document.getElementsByClassName('tab-item')
      for (var i = 0; i < navs.length; i++) {
        navs[i].index = i
        navs[i].onmouseover = function () {
          var index = this.index
          for (var j = 0; j < navs.length; j++) {
            navs[j].classList.remove('active')
            items[j].classList.remove('current')
          }
          this.classList.add('active')
          items[index].classList.add('current')
        }
      }
    </script>
  </body>
</html>
